const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWepackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
  resolve: {
    extensions: [".js", ".json", ".vue", ".ts", ".jsx"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  devServer: {
    hot: true, // 默认为true
    port: 8888, // 端口号
    host: "0.0.0.0", // 可以通过ip地址访问 127.0.0.1
    open: true,
    compress: true, // 对文件进行压缩
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            // options: {
            //   postcssOptions: {
            //     plugins: ["autoprefixer"],
            //   },
            // },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "less-loader" },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        // 打包2张图片 复制2张图片进去 且2张图片有自己的地址 多2次http 请求
        type: "asset/resource",

        // 做成base64元素 插入行内里面
        // type: "asset/inline",

        //  合理规范 小于多少打包成base64 大于多少直接 复制图片

        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024,
          },
        },
        generator: {
          // 占位符
          // name 指向原来的图片名称
          // ext 原来的扩展名
          // hash webpack 生成的哈希数值

          filename: "img/[name]_[hash:8][ext]",
        },
      },
      {
        test: /\.js$/,
        use: ["babel-loader"],
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWepackPlugin({
      title: "卡卡卡卡",
      template: "./index.html",
    }),
    new DefinePlugin({
      // 默认""会当成js的代码执行 需要在里面在加上单引号
      BASE_URL: "'./'",
    }),
  ],
};
